<template>
  <el-container class="data-analysis-container">
    <el-aside width="20%">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <div slot="header">危险行为统计</div>
            <div ref="behaviorChart" class="chart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        <el-col :span="24" style="margin-top: 20px;">
          <el-card>
            <div slot="header">危险人员分布</div>
            <div ref="personChart" class="chart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-aside>
    <el-main>
      <el-carousel :interval="4000" arrow="always" height="600px">
        <el-carousel-item v-for="(item, index) in photoCarouselItems" :key="index">
          <img :src="item.url" style="width: 100%; height: 100%;" />
        </el-carousel-item>
      </el-carousel>
    </el-main>
    <el-aside width="30%">
      <el-card>
        <div slot="header">危险行为记录</div>
        <div class="table-carousel">
          <el-table :data="currentDangerousBehaviors">
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="location" label="地点"></el-table-column>
            <el-table-column prop="behavior" label="行为"></el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card style="margin-top: 20px;">
        <div slot="header">危险人员名单</div>
        <div class="table-carousel">
          <el-table :data="currentDangerousPersons">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="id_card" label="身份证号"></el-table-column>
            <el-table-column prop="risk_level" label="风险等级"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-aside>
  </el-container>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DataAnalysis',
  data() {
    return {
      currentDangerousBehaviors: [],
      currentDangerousPersons: [],
      behaviorPageIndex: 0,
      personPageIndex: 0,
      pageSize: 10, // 每次显示的条数
      photoCarouselItems: [
        { url: require('@/assets/background.jpg') }

      ] // 示例照片轮播项
    };
  },
  computed: {
    dangerousBehaviors() {
      return this.$store.state.dangerousBehaviors;
    },
    dangerousPersons() {
      return this.$store.state.dangerousPersons;
    }
  },
  methods: {
    initCharts() {
      const behaviorData = this.dangerousBehaviors.reduce((acc, curr) => {
        if (!acc[curr.behavior]) {
          acc[curr.behavior] = 0;
        }
        acc[curr.behavior]++;
        return acc;
      }, {});

      const behaviorChartData = {
        xAxis: Object.keys(behaviorData),
        series: Object.values(behaviorData)
      };

      this.behaviorChart = echarts.init(this.$refs.behaviorChart);
      this.personChart = echarts.init(this.$refs.personChart);

      this.behaviorChart.setOption({
        title: { text: '危险行为统计' },
        tooltip: {},
        xAxis: { data: behaviorChartData.xAxis },
        yAxis: {},
        series: [{
          name: '次数',
          type: 'bar',
          data: behaviorChartData.series
        }]
      });

      const riskLevels = this.dangerousPersons.reduce((acc, curr) => {
        if (!acc[curr.riskLevel]) {
          acc[curr.riskLevel] = 0;
        }
        acc[curr.riskLevel]++;
        return acc;
      }, {});

      this.personChart.setOption({
        title: { text: '危险人员分布' },
        tooltip: { trigger: 'item' },
        legend: { top: '5%', left: 'center' },
        series: [
          {
            name: '人数',
            type: 'pie',
            radius: '50%',
            data: Object.entries(riskLevels).map(([key, value]) => ({ value, name: key })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    fetchInitialData() {
      this.$store.dispatch('fetchDangerousBehaviors')
          .catch(error => {
            console.error('Error fetching dangerous behaviors:', error);
          });
      this.$store.dispatch('fetchDangerousPersons')
          .catch(error => {
            console.error('Error fetching dangerous persons:', error);
          });
    },
    updateTableData() {
      this.currentDangerousBehaviors = this.dangerousBehaviors.slice(
          this.behaviorPageIndex * this.pageSize,
          (this.behaviorPageIndex + 1) * this.pageSize
      );
      this.currentDangerousPersons = this.dangerousPersons.slice(
          this.personPageIndex * this.pageSize,
          (this.personPageIndex + 1) * this.pageSize
      );
      this.behaviorPageIndex = (this.behaviorPageIndex + 1) % Math.ceil(this.dangerousBehaviors.length / this.pageSize);
      this.personPageIndex = (this.personPageIndex + 1) % Math.ceil(this.dangerousPersons.length / this.pageSize);
    }
  },
  mounted() {
    this.initCharts();
    this.fetchInitialData();
    setInterval(this.updateTableData, 3000); // 每3秒更新一次表格
  }
};
</script>

<style scoped>
.data-analysis-container {
  height: 100vh;
  background-color: rgba(190, 197, 207, 0.11);
}

.chart {
  height: 300px;
}

.el-card {
  margin-bottom: 20px;
}

.table-carousel {
  overflow: hidden;
  height: 300px; /* 根据需要调整表格的高度 */
}
</style>
